<template>
	<div class="writeform">
		<form class="form-cont">
			<div class="" v-if="list.approverState != '' && list.approverState != null">
				<div class="form-title clearFix">
					<p >审批信息</p>
				</div>
				<div class="form-baseinput">
					<div class="form-group formline tasked">
							<label>任务状态：</label>
							<p class="stateTask">
								{{taskStatus}}
							</p>
						</div>
						<div class="form-group formline tasked">
							<label>审批时间：</label>
							<p class="stateTask">
								{{auditDate}}
							</p>
						</div>
						<div class="form-group formline tasked">
							<label>审批意见：</label>
							<p class="stateTask">
								{{auditOption}}
							</p>
						</div>
				</div>
			</div>
			

			<div class="form-title clearFix">
				<p>任务信息</p>
			</div>
			<div class="form-baseinput">
					<div class="form-group formline">
						<label>任务名称：</label>
						<input type="text" name="taskName" v-model="taskInfo" class="form-control" disabled placeholder="任务名称">
					</div>
					<div class="form-group">
						<label>完成标准：</label>
						<span v-html="completionCriteria" class="form-control"></span>
						<!-- <textarea type="text" name="taskName" rows="5" v-html="completionCriteria" class="form-control" disabled placeholder="完成标准"></textarea> -->
					</div>
			</div>

			<div class="form-textarea">
				<div class="form-title clearFix">
					<p>描述</p>
				</div>
				<div class="form-group">
					<textarea name="missDescribe" rows="3" v-model="list.approverContent" class="form-control" placeholder="备注信息"></textarea>
				</div>
			</div>

			<div class="form-title clearFix">
				<p>相关照片</p>
			</div>
			<div class="form-group uploadimage" id="uploadimage">
				<ul>
					<li v-for="(img,index) in imgs">
						<img :src="img" @click="previewImg(img)"/>
						<i class="ion ion-ios-close" v-if="$route.query.state == '00' || list.approverState == '02'  || list.approverState == null" @click.stop.prevent="delImg(img,index)"></i>
					</li>
					<li>
						<a class="companypic" id="chooseImages" @click="getSig()" v-if="$route.query.state == '00' || list.approverState == '02' || list.approverState == null && imgs.length < 6">
		        			<i class="ion ion-android-add fontcompany"></i>
		        		</a>
	        		</li>
				</ul>
	        	
       		</div>
       		<div class="savebtn" v-if="$route.query.state == '00' || list.approverState == '02' || list.approverState == null">
	       		<button type="button" class="" @click="savenm('00')">保存</button>
	       		<button type="button" class="" @click="savenm('01')">保存并提交</button>
	   		</div>
		</form>
		<loading v-if="loadShow"></loading>
		<toast v-if="toastShow" :message="tipMessage"></toast>
	</div>
</template>

<script type="text/javascript">

	import wx from 'weixin-js-sdk'

	import jssdk from '../../assets/js/jssdk/wxJSSDK'

	import safeUrl from '../../assets/js/insterface'

	import http from '../../assets/js/http_mixin'

	export default {
		data () {
			return {
				tipMessage:'',
				taskInfo:'',
				completionCriteria:'',
				taskStatus:'',
				auditDate:'',
				auditOption:'',
				list:{
					id:'',
					submitNo:'',
					taskId:'',
					approverContent:'',
					approverImg:'',
					approverState:'',
					state:''
				},

				tipMessage:'',

				imgs:[],
				missImgs:[],

				idx:0,
				idx2:0
			}
		},
		mixins:[jssdk, http],
		mounted() {
		    document.title=this.$route.query.typeName;
			this.list.empNo = this.$route.query.empNo;
			this.list.taskId = this.$route.query.qid;
			this.selectData();
			this.init();
		},
		methods: {
			selectData() {
				this.$http.post(safeUrl.taskFreeSerives,{taskId:this.list.taskId},{emulateJSON: true})
				.then((response) =>{
					console.log(response.data)
					if(response.data.type == "2"){
						var responseInfo = response.data.taskInfo;
						var acVOList = response.data.acVO;
						this.taskInfo = responseInfo.taskInfo;
						//this.completionCriteria = responseInfo.completionCriteria;
						this.list.submitNo = responseInfo.empNum;
						this.list.approverContent = acVOList.approverContent;
						this.list.id = acVOList.id;
						this.list.approverState = acVOList.approverState;
						this.auditDate = acVOList.auditDate;
						this.auditOption = acVOList.auditOption;

						var strRegex = "((https|http|ftp|rtsp|mms)+://)"
							+ "+(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?"
							+ "(([0-9]{1,3}\.){3}[0-9]{1,3}"
							+ "|"
							+ "([0-9a-z_!~*'()-]+\.)*"
							+ "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\."
							+ "[a-z]{2,6})"
							+ "(:[0-9]{1,4})?"
							+ "((/?)|"
							+ "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)";
						var reg=new RegExp(strRegex,"g");                                             
						this.completionCriteria = responseInfo.completionCriteria.replace(reg,function(eve){
                            return '<a href='+eve+'>'+eve+'</a>';
                        });

						switch(acVOList.approverState){
							case '00':
								this.taskStatus = "审批通过";
								break;
							case '01':
								this.taskStatus = "审批中";
								break;
							case '02':
								this.taskStatus = "审批退回";
								break;
							default:
								this.taskStatus = "";
						}

						if(acVOList.approverImg != "" && acVOList.approverImg != null){
							const imgArr = acVOList.approverImg.split(",")
							for(var j=0; j<imgArr.length; j++){
								this.missImgs.push(imgArr[j]);
							}
							this.imgs = imgArr;
						}
						// debugger;
						if(this.$route.query.state != '00' && acVOList.approverState != "02" && acVOList.approverState != null){
							var form = document.forms[0]; 
							for ( var i = 0; i < form.length; i++) { 
								var element = form.elements[i]; 
								element.disabled = true; 
							} 
						}

						


					}
				})
				.then(function(response){
					console.log(response)
				})
			},
			getSig() {
				var vue = this;
				var chooseImageID = [];
				var imageId = document.getElementById('chooseImages');
				this.imageApi({
					chooseImage:{
						count:6 - vue.imgs.length,
						success:function(res){
							chooseImageID = res.localIds;
							if(chooseImageID[0].toString().indexOf("wxLocalResource") != -1){
								vue.getLocalImg(chooseImageID);    
							}else{
								for(var i=0; i<chooseImageID.length; i++){
									vue.imgs.push(chooseImageID[i]);
								}
							} 
							
							// vue.imglength = vue.imgs.length;
							vue.syncUpload(chooseImageID);
							console.log("gongsi------------" + chooseImageID);
						}
					}
				})
			},
			getLocalImg(eve){
		        var _this = this;
		        _this.imageApi({
					getLocalImgData:{
						localId: eve[_this.idx2].toString(),
						success: function (res) {
							_this.idx2++;
							_this.imgs.push(res.localData.toString());
							if (_this.idx2 < eve.length) {
								_this.getLocalImg(eve);   
							} else {
								_this.idx2 = 0;
							}
						}
					}
		        });    
		    },
			previewImg(img) {
				var vue = this;
				this.imageApi({
					previewImage:{
						current:img,
						urls:vue.imgs
					}
				})
			},
			syncUpload (localIds){
				var vue = this;
				this.imageApi({
					uploadImage:{
						localId:localIds[vue.idx].toString(),
						success:function(res){
							vue.idx++;
							vue.missImgs.push(res.serverId);
							if(vue.idx<localIds.length){
								vue.syncUpload(localIds);
							}else{
								vue.idx = 0;
							}
						}
					}
				})
			},
			savenm(e) {

				var vue = this;
				this.list.state = e;
				this.list.approverImg = this.missImgs.join(",");
				//保存操作
				this.getInfo({
					url:safeUrl.taskFreeSave,
					param:this.list,
					success:function(response){
						vue.toastShow = true;
						vue.tipMessage = response.data.msg;
						if(response.data.type == '2'){
							// setTimeout(function(){
							// 	vue.toastShow = false;
							// 	window.history.go(-1);
							// },1500);
							this.sendRemindng()
						}else{
							setTimeout(function(){
								vue.toastShow = false;
							},1500);
						}
						console.log(response.data);
					},
					fail:function(response){

					}
				})
			},
			sendRemindng() {
				let params = {
					empNum:this.$route.query.empNo,
					taskName:this.$route.query.typeName
				}
				const vue = this
				this.getInfo({
					url:safeUrl.taskReminding,
					param:params,
					success:function(response) {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					},
					fail:function() {
						setTimeout(function(){
							vue.toastShow = false;
							//window.history.go(-1);
						},1500);
					}
				})
			},
			delImg(img,i) {
				this.missImgs.splice(i,1);
				this.imgs.splice(i,1);
			}
		}
	}
</script>